<style scoped lang="less">
.layout {
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.layout-logo {
  width: 100px;
  height: 30px;
  background: #5b6270;
  border-radius: 3px;
  float: left;
  position: relative;
  top: 15px;
  left: 20px;
}
.layout-nav {
  width: 420px;
  margin: 0 auto;
  margin-right: 20px;
}
.layout-footer-center {
  text-align: center;
}
/*导航栏*/
.layout-header {
  width: 100%;
  height: 60px;
  padding: 0 40px;
  box-sizing: border-box;
  z-index: 1000;
  position: fixed;
  top: 0;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(26, 26, 26, 0.1);
  font-size: 14px;
  .header-navigate {
    .user-main-group {
      .ivu-menu-item-group-title {
        height: 0px;
      }
    }
  }
}
/*导航栏-用户信息*/
.header-user {
  float: right;
  div {
    float: left;
    margin: 5px;
  }
  .user-info {
    line-height: 48px;
  }
}
.layout-content {
  margin: 69px 20px 0px;
  // background: rgb(255, 255, 255);
  min-height: 557px;

  // 全局统一样式 字体和字体大小
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: #515a6e;

  // 内容样式
  .content-wrapper {
    // padding: 18px;
    height: ~"calc(100% - 80px)";
    overflow: auto;
  }
}
</style>
<template>
  <div class="layout">
    <Layout>
      <Header class="layout-header">
        <!-- logo -->
        <div class="logo-con" style="float:left">
          <img :src="logo" height="60px">
        </div>
        <!-- 导航 -->
        <Menu
          class="header-navigate"
          style="float:left"
          mode="horizontal"
          theme="light"
          active-name="1"
        >
          <MenuItem name="1">
            <Icon type="ios-paper"/>
            <router-link :to="{name:'index-request'}">问答</router-link>
          </MenuItem>
          <MenuItem name="2">
            <Icon type="ios-people"/>
            <router-link :to="{name:'answer-room'}">答疑室</router-link>
          </MenuItem>
          <Submenu name="3">
            <template slot="title">
              <Icon type="ios-stats"/>
              <router-link :to="{name: 'user-main'}">个人中心</router-link>
            </template>
            <MenuGroup class="user-main-group">
              <!-- <MenuItem name="3-1">消息中心</MenuItem> -->
              <MenuItem name="3-2">
                <router-link :to="{name:'user-info'}">用户信息</router-link>
              </MenuItem>
              <MenuItem name="3-3">
                <router-link :to="{name:'user-center'}">我的主页</router-link>
              </MenuItem>
            </MenuGroup>
          </Submenu>
          <MenuItem name="4" v-if="getRoleName =='普通管理员' || getRoleName =='超级管理员'">
            <Icon type="ios-construct"/>
            <router-link :to="{name: 'home'}">后台管理</router-link>
          </MenuItem>
        </Menu>
        <!-- 用户信息 -->
        <div class="header-user">
          <div class="user-info" v-if="isLogin">
            <div style="line-height: 32px;">
              <Dropdown @on-click="handleClick">
                <span>{{getUserName}}</span>
                <Icon :size="18" type="md-arrow-dropdown"></Icon>
                <DropdownMenu slot="list">
                  <DropdownItem name="logout">退出登录</DropdownItem>
                </DropdownMenu>
              </Dropdown>
            </div>
            <!-- <div style="height: 60px;line-height: 48px;">
              <Badge dot>
                <Icon type="ios-notifications-outline" size="26"></Icon>
              </Badge>
            </div>-->
          </div>
          <div class="register-login" v-else>
            <Button @click="registerBtn">注册</Button>
            <Button type="success" :to="{name:'login'}" style="margin-left:5px">登录</Button>
          </div>
        </div>
      </Header>
      <Content class="layout-content">
        <Content class="content-wrapper">
          <router-view/>
          <BackTop></BackTop>
        </Content>
      </Content>
      <Footer class="layout-footer-center">
        <p>2018-2019 &copy;毕业设计-网上答疑系统</p>
        <p style="font-size:12px">南京信息工程大学 滨江学院 15软件2 时少龙 20152344063</p>
      </Footer>
    </Layout>
    <!-- 注册模态框 -->
    <div>
      <Modal
        :title="modalTitle"
        :value="modalShow"
        draggable
        :closable="false"
        :mask-closable="false"
        :width="800"
      >
        <user-add
          ref="RegisterFormRef"
          :row="userInfo"
          :isSuperAdmin="false"
          :showPassword="true"
          @validate-success="handleRegister"
        ></user-add>
        <div slot="footer" v-if="true">
          <Button type="text" @click="canCelRegisterBtn" size="large">取消</Button>
          <Button type="primary" @click="saveRigsterBtn" size="large">注册</Button>
        </div>
      </Modal>
    </div>
  </div>
</template>
<script>
import logo from '@/assets/images/logo.jpg'
import { getToken } from '@/libs/util'
import { mapGetters, mapActions, mapState } from 'vuex'

import UserAdd from '@/view/ora-admin/user-manage/UserAdd.vue'

export default {
  components: {
    UserAdd
  },
  data () {
    return {
      logo,
      modalTitle: '注册',
      modalShow: false,
      userInfo: {}
    }
  },
  methods: {
    // ...mapGetters(["isLogin", "getUserId", "getUserName", "getRoleName"]),
    // 注册
    registerBtn () {
      this.userInfo = {
        sex: 0
        // phone: null,
        // name: "",
        // birthday: null,
        // roledId: null,
        // professionId: null
      }
      this.modalShow = true
    },

    saveRigsterBtn () {
      this.$refs.RegisterFormRef.preHandleSubmit()
    },

    // 处理注册请求
    handleRegister () {
      this.$httpUtil.asyncPost('web/user/register', this.userInfo, res => {
        let data = res.data
        if (data.code === 200) {
          this.$Message.success('注册成功')
          this.registerSuccessTip(data.records)
          this.canCelRegisterBtn()
        } else {
          this.$Message.error(data.msg)
        }
      })
    },

    // 注册成功提示
    registerSuccessTip (userInfo) {
      this.$Modal.info({
        title: '注册成功提示',
        content:
          '<p>您的工/学号为:' +
          userInfo.no +
          '</p>' +
          '<p>此号是您登录系统的账号，一定要记住哦<p>',
        loading: true,
        onOk: () => {
          setTimeout(() => {
            this.$Modal.remove()
          }, 2000)
        }
      })
    },

    // 取消注册
    canCelRegisterBtn () {
      this.modalShow = false
    },

    ...mapActions(['handleLogOut']),
    handleClick (name) {
      switch (name) {
        case 'logout':
          this.handleLogOut().then(() => {
            // window.location.reload();
            this.$Message.success('退出成功')
            this.$router.push({ name: 'index' })
          })
          break
      }
    },
    showBroswerScrollBar () {
      document.body.parentNode.style.overflowY = 'auto'
      // document.getElementsByTagName("body")[0]
      //   .parent()
      //   .css("overflow-y", "auto");
    },
    init () {
      // this.getUserId();
      // this.isLogin();
      // this.getUserName();
      // this.getRoleName();
    }
  },
  computed: {
    ...mapState({
      user: state => state.user
    }),
    ...mapGetters(['isLogin', 'getUserId', 'getUserName', 'getRoleName'])
  },
  watch: {},
  mounted () {
    this.init()
  }
}
</script>
